<template>
	<div id="app">
		<!--图片轮播-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">商品信息</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" router-link :to="{ path: '/main/shopping' }" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<v-sheet id="scrolling-techniques-8" class="overflow-y-auto" style="width:100%;">
			<v-container style="padding:0;width:100%;">
				<v-carousel hide-delimiter-background show-arrows-on-hover hide-delimiters='false' height="65vw">
					<v-carousel-item v-for="(image, i) in goods.img_urls" :key="i" :src="image"></v-carousel-item>
				</v-carousel>
				<!--商品信息展示-->
				<v-card solo flat>
					<v-list-item>
						<v-list-item-content>
							<v-list style="font-weight: bold;">
								<div style="float: left;font-size: 20px">{{goods.name}}</div>
								<div style="float: right;color: red;font-size: 20px">{{goods.need_integral}}积分</div>
								<div class="clearfloat"></div>
							</v-list>
						</v-list-item-content>
					</v-list-item>
					<!-- 					<v-list-item>
						<v-list-item-content style="color: red;font-size: 20px;">200积分{{ goods.price }}</v-list-item-content>
					</v-list-item> -->
					<v-list-item>
						<v-col style="font-size: 12px;padding: 0;">
							月兑换数:{{goods.volume}} </v-col>
						<v-col style="text-align: center;font-size: 12px;padding: 0">
							免运费</v-col>
						<v-col style="text-align: right;font-size: 12px;padding: 0;">
							发货地:厦门
						</v-col>
					</v-list-item>
				</v-card>
				<v-divider></v-divider>
				<v-card solo flat>
					<v-list-item>
						<v-list-item-content style="font-size: 12px;color: gray;max-width: 50px">
							规格
						</v-list-item-content>
						<v-list-item-content style="font-size: 12px;">
							{{goods.norms}}
						</v-list-item-content>
					</v-list-item>
				</v-card>
				<v-divider></v-divider>
				<v-card solo flat>
					<v-list-item>
						<v-list-item-content style="font-size: 15px;">
							详情
						</v-list-item-content>
					</v-list-item>
					<!-- 					<v-list-item>
						{{ goods.detail }}
					</v-list-item> -->
					<v-list-item>
						<p style="text-indent:2em ;color: gray;font-size: 12px;">{{ goods.detail}}</p>
					</v-list-item>
				</v-card>
				<div style="width:100%;height:6vh;">
				</div>
				<v-btn block color="#FF5252" class="mr-4" @click="duihuan=true" style="font-size: 17px;color:white;	position: fixed;
				bottom: 0;left:0;">
					兑换商品
				</v-btn>
			</v-container>
		</v-sheet>

		<el-dialog title="提示(商品一经兑换不得取消)" :visible.sync="duihuan" width="80%" top="30vh">
			<div>您将要兑换的商品为：<span style="color: #FF5252;">{{goods.name}}</span></div>
			<div>所需要的积分为：<span style="color: #FF5252;">{{goods.need_integral}}</span></div>
			<div><span style="color: #FF5252;">*</span>需要选择您的收货地址：</div>
			<div class="dialog_input">
				<el-select v-model="value" placeholder="请选择" style="width:100%;" @change="show_address()">
					<el-option value="-1">添加联系人</el-option>
					<el-option v-for="item in address_list" :key="item.id" :label="'收件人:'+item.name" :value="item.id">
						收货地址：{{item.id}}</el-option>
				</el-select>
			</div>

			<div v-if="address_data">
				<!-- 加载选项资料 -->
				<div>收货人为：<span style="color: #FF5252;">{{address.name}}</span></div>
				<div>联系方式：<span style="color: #FF5252;">{{address.phone}}</span></div>
				<div>收货地址：<span style="color: #FF5252;">{{address.address}}</span></div>
			</div>
			<div class="dialog_input">
				<div style="float: right">
					<el-button type="danger" style="width: 35vw;text-align: center;" @click="check_dh()">确定兑换</el-button>
				</div>
			</div>
			<div class="clearfloat"></div>
			<v-snackbar v-model="snackbarCheck" bottom :timeout="timeout">
				{{message_two}}
			</v-snackbar>
			
		</el-dialog>

	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "Goods",
		data() {
			return {
				goods: '',
				duihuan: false,
				goods_id: this.$route.params.goods_id,
				address_list: [],
				value: '',
				address: [],
				address_data: false,
				snackbarCheck:false,
				timeout:1000,
				message_two:''
			};
		},
		watch: {
			//检测用户点击兑换
			duihuan: function() {
				let _this = this;
				axios
					.get("/api/v1.0/users/get_address")
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.address_list = response.data.data;
							console.log(response.data)
						} else if (response.data.errno == '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						} else {
							console.log(response.data)
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			value: function() {
				if (this.value == "-1") {
					this.$router.push({
						path: '/mine/address/add'
					})
				}
				for (let address in this.address_list) {
					if (this.address_list[address].id == this.value) {
						this.address = this.address_list[address]
						console.log(this.address)
						break;
					}
				}
			}
		},
		mounted() {
			this.getGoods();
		},
		methods: {
			//点击购买商品
			show_address() {
				this.address_data = true;
			},

			//从后端获取商品信息
			getGoods() {
				let _this = this;
				axios
					.get("/api/v1.0/goods/get_goods_del/" + this.goods_id)
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.goods = response.data.data;
							console.log(response.data.data);
						} else {
							console.log(response.data);
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			check_dh(){
				let _this = this;
				axios
					.post("/api/v1.0/goods/check_goods_exchange",{
							goods_id: this.goods_id,
							address_id :this.address.id
						})
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.snackbarCheck = true;
							_this.message_two = response.data.errmsg;
							setTimeout(function() {
								_this.duihuan = false;
							}, 1000);
						} else if (response.data.errno == '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						} 
						if (response.data.errno == '4002'){
							_this.snackbarCheck = true;
							_this.message_two = response.data.errmsg;
						}
						else {
							console.log(response.data)
						}
					})
					.catch(function(error) {
						console.log(error);
					});
				
			}
		}
	};
</script>

<style scoped>

</style>
